<template>
  <div class="home FlexC JustifyContentSB PositionR">
    <div>
      <img src="@/assets/img/home/02-homeTitle.png" width="100%" alt="">
    </div>
    <router-view />
    <div class="navBg"></div>
    <TopLeftTitle></TopLeftTitle>
    <div class="navBar Flex TextC JustifyContentSA Font_s18 AlignItemsFE">
      <p @click="openUrl(1)" :class="{navActive: navIsActive === 1}">通城居家养老平台</p>
      <p @click="openUrl(2)" :class="{navActive: navIsActive === 2}">通城老人数据显示</p>
      <p @click="openUrl(3)" :class="{navActive: navIsActive === 3}">通城养老机构数据显示</p>
      <p @click="openUrl(4)" :class="{navActive: navIsActive === 4}">养老社区养老数据展示</p>
      <p @click="openUrl(5)" :class="{navActive: navIsActive === 5}">通城居家养老数据展示</p>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

import TopLeftTitle from './communityPension/TopLeftTitle'
export default {
  name: 'home',
  components: { TopLeftTitle },
  data () {
    return {
      navIsActive: 4
    }
  },
  methods: {
    openUrl (num) {
      this.navIsActive = num
      if (num === 1) {
        this.$router.push('/livingPension')
      } else if (num === 2) {
        this.$router.push('/elderData')
      } else if (num === 3) {
        this.$router.push('/pensionOrganization')
      } else if (num === 4) {
        this.$router.push('/communityPension')
      } else if (num === 5) {
        this.$router.push('/pensionData')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  background: url(../assets/img/home/01-homeBg.png) no-repeat center;
  background-size: 100% 100%;
  .navBg {
    // width: 3000px;
    width: 100%;
    height: 4rem;
    background:rgba(8,8,27,0.4);
    border:1px solid rgba(44, 65, 183, 0.6);
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    z-index: 0;
  }
  .navBar {
    color: #7D8CE2;
    box-sizing: border-box;
    padding: 0 20rem;
    position: relative;
    z-index: 9;
    p {
      line-height: 4rem;
      cursor: pointer;
    }
    .navActive {
      line-height: 5.6875rem;
      color: #ffffff;
      font-size: 23px;
      padding: 0 1.25rem;
      background: url(../assets/img/home/03-navActive.png) no-repeat center;
      background-size: 100% 100%;
    }
  }
}
</style>
